﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>How To Use Menu Builder © 2013 - mb-seifollahi.ir</title>
    <style type="text/css">
        body
        {
            margin: 0px;
            padding: 0px;
            color: #afaa69;
            font-family: Tahoma, Geneva, sans-serif;
            font-size: 13px;
            line-height: 1.7em;
            background-color: #363413;
            background-image: url();
            background-repeat: repeat-x;
            background-position: top center;
        }

        a, a:link, a:visited
        {
            color: #FFFFFF;
            font-weight: normal;
            text-decoration: underline;
        }

            a:hover
            {
                color: #FFFF33;
                text-decoration: none;
            }

        p
        {
            margin: 0 0 10px 0;
            padding: 0;
        }

        img
        {
            border: none;
        }

        blockquote
        {
            font-style: italic;
            margin: 0 0 0 10px;
        }

        cite
        {
            font-weight: bold;
            color: #fff;
        }

            cite span
            {
                color: #e3dfae;
            }

        em
        {
            color: #fff;
        }

        h1, h2, h3, h4, h5, h6
        {
            color: #fff;
            font-weight: normal;
        }

        h1
        {
            font-size: 28px;
            margin: 0 0 20px 0;
            padding: 5px 0;
        }

        h2
        {
            font-size: 25px;
            margin: 0 0 15px 0;
            padding: 5px 0;
        }

        h3
        {
            font-size: 22px;
            margin: 0 0 15px;
            padding: 0;
        }

        h4
        {
            font-size: 18px;
            margin: 0 0 15px;
            padding: 0;
        }

        h5
        {
            font-size: 16px;
            margin: 0 0 10px;
            padding: 0;
        }

        h6
        {
            font-size: 14px;
            margin: 0 0 5px;
            padding: 0;
        }

        .cleaner
        {
            clear: both;
        }

        

        /* footer */

        #templatemo_footer_wrapper
        {
            clear: both;
            width: 100%;
            background: #28260d;
            border-top: 1px solid #4d4a21;
        }

        #templatemo_footer
        {
            width: 900px;
            padding: 30px;
            margin: 0 auto;
        }
            /* social */

            #templatemo_footer #social_box
            {
                clear: both;
                margin: 20px 0;
                padding: 0;
                list-style: none;
            }

        #social_box li
        {
            display: block;
            float: left;
            padding: 0;
            margin: 0;
        }

            #social_box li a
            {
                width: 24px;
                height: 24px;
                margin: 0 5px 5px 0;
                text-decoration: none;
                border: none;
            }

        /* end of social */

        /* copyright */

        #templatemo_copyright_wrapper
        {
            clear: both;
            width: 100%;
            background: #000;
            border-top: 1px solid #3f3c18;
        }

        #templatemo_copyright
        {
            width: 900px;
            padding: 10px 30px;
            margin: 0 auto;
            text-align: center;
            font-size: 11px;
        }

            #templatemo_copyright a
            {
                color: #afaa69;
            }
    </style>
</head>
<body>
    <a name="anchor0"></a>

    <center>
            <h1 style="padding-top:50px;">
                Menu Builder Based on UL - LI html tag
            </h1>
            <p id="templatemo_copyright">
                © 2013 Jan - Belongs to <a href="http://www.mb-seifollahi.ir" target="_blank">www.mb-seifollahi.ir</a>
                &nbsp;&nbsp;&nbsp;&nbsp;| &nbsp;&nbsp; <a href="#anchor1">What's it?</a>&nbsp;&nbsp; | &nbsp;&nbsp; <a href="#anchor2">How to use ?</a>
            </p>
            <br />
            <div>
                <img alt="" style="border:groove gray 15px;" src="" />
            </div>
            <p>
                Contact me<br /> Via : <a href="mailto:mb.seifollahi@gmail.com"> mb.seifollahi@gmail.com</a> 
                <br />
                Or
                <br />
                Via : <a href="mailto:info@mb-seifollahi.ir"> info@mb-seifollahi.ir</a> 
            </p>
            <hr style="width:50%"/>
            <a name="anchor1"></a>
            <h2>
                What is it?
            </h2>
            <p>
                This Assembly (based on .NET 3.5) helps you to Generate Menu based on &lt;ul&gt; - &lt;li&gt; tags (customizable)<br /> <span style="color:aliceblue;font-size:large"> without any limitation in count of child Nodes</span>
                <br />
                <img alt="" src="" />
                <br />
                & contains 4 Classes 
            </p>
            <hr style="width:50%"/>

            <p>
                <b>Setting</b> that contains Format of UL or LI tags (it's default & you can change it)
                <br />
                <img alt="" src="" />
                <br />
                <b style="color:yellow;font-size:larger">DisplayChildFormat</b> : 
                <br />
                Default value : <i>  &lt;li&gt;&lt;a href="{0}" title="{1}" &gt;{2}&lt;/a&gt;&lt;/li&gt;  </i>
                
                <br />
                {0} = shows value Property of  <b>Node</b> Class
                <br />
                {1} = shows ToolTip Property of <b>Node</b> Class
                <br />
                {2} = shows Text Property of <b>Node</b> Class
                <br /><br />
                <b style="color:yellow;font-size:larger">DisplayNodeWithChild</b> : 
                <br />
                Default value : <i>  &lt;li&gt;{0}&lt;/li&gt;  </i>
                
                <br />
                {0} = shows Child Nodes (inner nodes)

            
                <br /><br />
                <b style="color:yellow;font-size:larger">DisplayParentFormat</b> : 
                <br />
                Default value : <i>  &lt;ul&gt;{0}&lt;/ul&gt;  </i>
                <br />
                {0} = shows Sub-Menu generated by <b>Builder</b> Class
                <br />
                <br />
                <b style="color:yellow;font-size:larger">OnNodeAdded event</b> : 
                <br />
                fires when a node added 
                <br /><br />
                <b style="color:yellow;font-size:larger">About()</b> : 
                <br />
                Returns this text : <u>By : mb.seifollahi [http://www.mb-seifollahi.ir] © 2013 Jan . mb.seifollahi@gmail.com</u>
                
            </p>        
            <hr style="width:50%"/>
            <p>
            
                <b>Node</b> that contains Properties of each Record in Data Source
                <br />
                <img alt="" src="" />
                 <div style="color:white">
                    Read / Write Properties
                </div>
           
                NodeID : <span style="color:burlywood">int</span>
                <br />
                ParentID : <span style="color:burlywood">int?</span>
                <br />
                Text : <span style="color:burlywood">string</span>
                <br />
                Value : <span style="color:burlywood">string</span>
                <br />
                 ToolTip : <span style="color:burlywood">string</span>
                <br />
                Childs : <span style="color:burlywood">List&lt;Node&gt;</span>
                <div style="color:white">
                    Read Only Properties
                </div>
                IsRoot : <span style="color:burlywood">bool</span>
                <br />
                HasChild : <span style="color:burlywood">bool</span>
                <br />
                Formatted : <span style="color:burlywood">string</span>
                <br />

            </p>
            <hr style="width:50%"/>
            <p>
                <b>Builder</b> Normalize and Generates the Menu
                <br />
                <img alt="" src="" />
                <div style="color:white">
                    Read / Write Properties
                </div>
                NodeSetting : <span style="color:burlywood">Setting</span> class
                <br />
                <div style="color:white">
                    Read Only Properties
                </div>
                Data : <span style="color:burlywood">List&lt;Node&gt;</span>
                <div style="color:white">
                    Methods
                </div>
                Builder (ctor) : Arg = <span style="color:burlywood">List&lt;Node&gt;</span>
                <br />
                Normalize  :  Returns = <span style="color:burlywood">List&lt;Node&gt;</span>
                <div>This method changes the value of <b>Data</b> Property and validates the Data to Serialization (e.g. using in JSON)
                    <br /> It makes relationship between all nodes as Parant & child . 
                    <br />
                    <div style="color:yellow;font-size:medium">I prefer to use this method before Export method</div>
                </div>
                Export  : Arg = <span style="color:burlywood">List&lt;Node&gt;</span> |  Returns = <span style="color:burlywood">StringBuilder</span>
            </p>
        
        
            <hr style="width:50%"/>
            <a name="anchor2"></a>
        
        

            <h3>
                How to use ?
            </h3>
            <h6>
                These Images show you how to use this Component : 
            </h6>
            <br />
            <p>
                1 . Load your Data Source as <b>List&lt;Node&gt;</b>
                <br />
                if it's not in a valid formt , change it like this Example:
                <br />
                <div>My Original Soucre</div>
                <img alt="" src="" />
                <br />
                in this example <span style="color:aqua">Tuple&lt;int, int?, string, string&gt;(1, null, "Text 1", "Value 1")</span> is a row of my table
                <br />
                <br />
                    <h4> Beware of Loop</h4>
                    <p>
                        Be careful when you set parent and childs !!!
                        <br />
                        invalid and harmful example : <br />
                        <img alt="" src="" />
                        
                    </p>
                
                <br />
                <br />
                <div>My Valid Format Soucre</div>
                <img alt="" src="" />
            </p>
            <p>
                Now , you can Export your menu with this simple code :
                <br />
               <img alt="" src="" />
                 <br />
                <span>if you would like to use your data in JSON , After Normalization , you can get your data from <b>Data</b> Property and serialize it as Json</span>
            </p>
       
            <p style="font-size:medium">
                AND result is : <br />
                <img alt="" src="" />
                 <br />
                you can set your css classes to your format in setting class
            </p>
            <br />
            <br />
            <br />
            <div id="templatemo_footer_wrapper">
                <a target="_blank" href="http://mb-seifollahi.ir/Public/about.aspx?.[c].=i%20want%20to%20report%20a%20Bug%20in%20Menu%20Builder%20:">Report a Bug</a>
                <br />
                <a  target="_blank" href="http://mb-seifollahi.ir/Public/about.aspx?.[c].=i want to talk about Menu Builder">Send a Comment</a>
                <br />
                <a  target="_blank" href="http://mb-seifollahi.ir/Public/about.aspx?.[c].=i want to Send a better solution about Menu Builder">Better Solution</a>
                <br />
                <img width="48px" alt="" src="" />
            </div>
            <p id="templatemo_copyright_wrapper">
                © 2013 Jan - Belongs to <a href="http://www.mb-seifollahi.ir" target="_blank">www.mb-seifollahi.ir</a> | <span  title="GNU">Free Software License</span>
                <span style="float:right;padding-right:100px;"><a href="#anchor0">Top</a></span>
                <span style="float:left;padding-left:100px;"><a href="#anchor0">Top</a></span>

            </p>
        </center>
</body>
</html>
